<!--
 * @Author: 黄威
 * @Date: 2022-03-21 15:14:21
 * @LastEditors: 黄威
 * @LastEditTime: 2022-03-21 15:59:15
 * @Description: 图例
-->
<template>
    <div class="legend-wrapper" v-drag="'img'" v-show="visible">
        <img :src="imgSrc" />
        <el-button type="primary" size="mini" style="padding: 0" @click="close">
            <i class="el-icon-close"></i>
        </el-button>
    </div>
</template>

<script>
export default {
    props: { bindMap: Object },
    data() {
        return {
            visible: false,
            imgSrc: './img/legend.png',
        };
    },
    methods: {
        show(type) {
            this.visible = true;

            // 坡度分析
            if (type !== 'calculateSlopeOrAspect') {
                this.imgSrc = './img/legend.png';
            }
            // 通视 可视域
            else {
                this.imgSrc = './img/slope.png';
            }
        },
        close() {
            this.bindMap.endDraw();
            this.bindMap.clearDraw();
            this.bindMap.clearAnalysis();

            this.visible = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.legend-wrapper {
    position: absolute;
    .el-button {
        position: absolute;
        top: 1px;
    }
}
</style>
